@charset "UTF-8";
/**
 * Yo框架全局基础方法
 -----------------------
 * Yo内置了包括响应式方案，CSS3兼容性方案，厂商前缀方案，iconfont方案，flex布局等全局方法
 *
 * @class classes
 * @module Yo
 */
/**
 * 给需要的属性加厂家前缀
 * @method prefix
 * @param {String} $property 指定属性
 * @param {String} $value 指定属性值
 */
/**
 * 四则运算
 * @method calc
 * @param {String} $property 指定需要进行计算的CSS属性
 * @param {String} $value 与原生CSS语法一致，使用方式如：@include calc(width, 100% - 0.1rem);
 */
/**
 * 定义渐变色值
 * @method gradient
 * @param {String} $type 指定渐变的4种类型：linear, repeating-linear, radial, repeating-radial
 * @param {String} $gradient 指定渐变取值，与w3c最新原生语法一致
 */
/**
 * 定义响应式方案
 * @method responsive
 * @param {String} $media 指定媒体查询条件
 */
/**
 * 定义字体图标
 * @method yofont
 */
/**
 * 滤镜
 * @method filter
 * @param {String} $filter 取值与原生语法一致
 */
/**
 * 定义UA默认外观
 * @method appearance
 * @param {String} $appearance 指定UA外观类型
 */
/**
 * 定义是否可以选中元素
 * @method user-select
 * @param {String} $user-select 指定是否可以选中
 */
/**
 * 定义背景图像缩放（Android Browser2.3.*还需要厂商前缀）
 * @method background-size
 * @param {String | Length} $background-size 指定背景图缩放值
 */
/**
 * 定义背景裁减（Android Browser2.3.*还需要厂商前缀）
 * @method background-clip
 * @param {String} $background-clip 指定背景图缩放值
 */
/**
 * 定义背景显示区域（Android Browser2.3.*还需要厂商前缀）
 * @method background-origin
 * @param {String} $background-origin 指定背景图缩放值
 */
/**
 * 定义盒模型
 * @method box-sizing
 * @param {String} $box-sizing 的2个值分别为：content-box(标准盒模型) | border-box(怪异盒模型)
 */
/**
 * 定义圆角
 * @method border-radius
 * @param {String} $border-radius 取值与原生语法一致
 */
/**
 * 定义简单变换
 * @method transform
 * @param {String} $transform 取值与原生语法一致
 */
/**
 * 定义变换原点
 * @method transform-origin
 * @param {String} $transform-origin 取值与原生语法一致
 */
/**
 * 定义动画
 * @method animation
 * @param {String} $animation 取值与原生语法一致
 */
/**
 * 定义补间
 * @method transition
 * @param {String} $transition 取值与原生语法一致
 */
/**
 * 定义显示类型为伸缩盒
 * @method flexbox
 * @param {String} $flexbox 默认值：flex，取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素如何分配空间
 * @method flex
 * @param {String} $flex 默认值：1，取值与最新原生语法一致
 * @param {String} $direction 默认值: row
 */
/**
 * 定义伸缩盒子元素的排版顺序
 * @method order
 * @param {String} $order 默认值：1，取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素的流动方向
 * @method flex-direction
 * @param {String} $flex-direction 默认值：row，取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素溢出排版
 * @method flex-wrap
 * @param {String} $flex-wrap 默认值：nowrap，取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素的水平对齐方式
 * @method justify-content
 * @param {String} $justify-content 默认值：center，取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素的垂直对齐方式
 * @method align-items
 * @param {String} $align-items 默认值：center，取值与最新原生语法一致
 */
/**
 * 定义伸缩盒子元素自身的垂直对齐方式
 * @method align-self
 * @param {String} $align-self 默认值：center，取值与最新原生语法一致
 */
/**
 * 定义root root-scroll
 * @method root-scroll
 * @param {String} $root-scroll 指定scroll类型，取值overflow属性的标准值
 */
/**
 * 定义是否有滚动条
 * @method overflow
 * @param {String} $overflow 默认值：auto，取值与最新原生语法一致
 */
/**
 * 生成矩形方法
 * @method rect
 * @param {Length} $width 定义矩形的长度
 * @param {Length} $height 定义矩形的高度
 */
/**
 * 生成正方形方法
 * @method square
 * @param {Length} $size 定义正方形的边长
 */
/**
 * 生成圆形方法
 * @method circle
 * @param {Length} $size 定义圆的半径长度
 * @param {Length} $radius 定义圆的圆角半径长度
 */
/**
 * 生成全屏方法
 * @method fullscreen
 * @param {Integer} $z-index 定义层叠级别
 */
/**
 * 清除浮动方案
 * @method clearfix
 */
/**
 * 链接处理方法
 * @method link
 * @param {Color} $color 定义链接颜色
 */
/**
 * 强制换行方案
 * @method wrap
 */
/**
 * 单行文本溢出显示方案
 * @method ellipsis
 * @param {Boolen} $ellipsis 定义是否需要省略号
 */
/**
 * 文字隐藏方案
 * @method texthide
 */
/**
 * 清除间隙方案-容器
 * @method killspace
 */
/**
 * 清除间隙方案-子级
 * @method killspace-item
 */
/**
 * 未知尺寸元素垂直居中解决方案-容器
 * @method valign
 */
/**
 * 未知尺寸元素垂直居中解决方案-子级
 * @method valign-item
 */
/**
 * 已经尺寸元素垂直居中解决方案
 * @method alignment
 * @param {Length} $width 居中元素的宽度
 * @param {Length} $height 居中元素的高度
 */
/* border */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 400; }

img {
  border: 0;
  vertical-align: top; }

li {
  list-style: none; }

input, textarea {
  border: none;
  background: none;
  appearance: none; }

input, textarea, select {
  border: 0;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit; }

button, input[type="submit"] {
  border: none;
  background: none;
  appearance: none;
  outline: none; }

a {
  touch-callout: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; }

i, em {
  font-style: normal; }

textarea {
  resize: none; }

button::-moz-focus-inner,
input::-moz-focus-inner,
textarea::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*作用不很多*/
/*按钮的字体颜色*/
/*普通字体颜色*/
/*变亮的字体颜色*/
/*金额的颜色*/
.page, .header, .sub-header, .content, .wrapper, .scroller, .footer, #loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

html, body {
  height: 100%;
  overflow: hidden;
  font-size: 12px; }

html {
  font-size: 16vw; }

.page {
  height: 100%;
  overflow: hidden;
  background: #f3f4f6; }

.header {
  height: 44px;
  line-height: 44px;
  background: #b11f1f;
  text-align: center;
  color: #fff;
  font-size: 18px; }

.header-list {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex; }

.header-btn {
  width: 60px; }

.header-tit {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: .1px; }

.sub-header {
  top: 44px;
  height: 30px;
  line-height: 30px;
  background: #9a9fa5; }
  .sub-header ul {
    height: 100%;
    white-space: nowrap; }
  .sub-header li {
    display: inline-block;
    color: #fff;
    padding: 0 10px; }

.content {
  top: 44px;
  bottom: 0; }

.has-sub-header {
  top: 74px; }

.has-footer {
  bottom: 48px; }

.wrapper {
  height: 100%;
  overflow: hidden; }

.scroller {
  background: #f3f4f6; }

.down-text {
  line-height: 50px;
  text-align: center; }

.footer {
  top: auto;
  bottom: 0;
  height: 48px;
  line-height: 48px;
  background: #484850; }
  .footer .footer-list {
    height: 100%; }
    .footer .footer-list li {
      float: left;
      width: 20%;
      text-align: center; }
    .footer .footer-list a {
      color: #fff; }

#loading {
  bottom: 0;
  display: none;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2); }
  #loading .loading-img {
    width: 62px;
    height: 62px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -31px 0 0 -31px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4); }
    #loading .loading-img img {
      width: 32px;
      height: 32px; }
